<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">楼宇名称：</div>
      <el-input v-model="params.name" clearable placeholder="请输入内容" class="search-main" @clear="getList"/>
      <el-button type="primary" @click="getList">查询</el-button>
    </div>

    <el-button class="btn" type="success" :round="true" @click="open">增加楼栋</el-button>

    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list" style="width: 100%" >
        <!-- type="index" 表示这一列是序号 type="selection"表示这一列是多选 -->
        <el-table-column type="index" label="序号" />
        <!-- prop='字段名字符串' 它会自己找这一列的字段展示-->
        <el-table-column label="楼宇名称" prop="name" width="180" />

        <el-table-column label="层数" prop="floors" />
        
        <el-table-column label="在管面积(m²)" prop="area" width="120" />
        
        <el-table-column label="物业费(元/m²)" prop="propertyFeePrice" width="120" />
        <!-- formatter配置属性函数 决定在页面中的展示状态 -->
        <el-table-column label="状态" prop="status" :formatter="fn"/>

        <el-table-column label="操作" >
          <template #default="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div  class="box">
        <!-- 分页器的
         -->
      <el-pagination
      :current-page="params.page"
      :page-sizes="[5,10, 15, 20]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      />
      </div>

    </div>

    <!-- 准备一个看不见的对话框dialog -->
    <!-- close事件 点击x号时或其他层时触发 -->
    <el-dialog :title="form.id ? '编辑楼宇' : '添加楼宇'" :visible="flag" @close="handleClose">
      <div style="display: flex; justify-content: center;">
      <el-form ref="form" :model="form" :rules="rules" style="width: 400px">

      <el-form-item label="楼宇名称" prop="name">
        <el-input v-model="form.name"/>
      </el-form-item>

      <el-form-item label="楼宇层数" prop="floors">
        <el-input v-model="form.floors"/>
      </el-form-item>

      <el-form-item label="在管面积" prop="area">
        <el-input v-model="form.area"/>
      </el-form-item>

      <el-form-item label="物业费" prop="propertyFeePrice">
        <el-input v-model="form.propertyFeePrice"/>
      </el-form-item>

      <el-form-item>
        <el-button>取 消</el-button>
        <el-button  @click="confirm">确 认</el-button>

      </el-form-item>

      </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { getBuildingListAPI, addBuildingAPI, delBuildingAPI,editBuildingAPI } from '@/api/building'

export default {
  name: 'Building',

  data(){
    return{
      flag: false,
      total: 0,
      list: [],

      //获取数据的条件
      params: {
        page: 1,
        pageSize: 10,
        name: '' // 增加字段name
      },
      form:{
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''

      },
      rules:{
        name:[
          {required: true, message: '请输入楼宇名称', trigger: 'blur'}
        ],
        floors:[
          {required: true, message: '请输入该楼宇的楼层数', trigger: 'blur'}
        ],
        area:[
          {required: true, message: '请输入该楼宇的在管面积', trigger: 'blur'}
        ],
        propertyFeePrice:[
          {required: true, message: '请输入每平米的物业费', trigger: 'blur'}
        ],
        
      }

    }
  },

  //页面加载好之后 发送请求 请求数据
  mounted(){
    this.getList()
  },

  
  
  methods: {

    edit(row) {
  // 1. 打开弹框
  console.log(row)
  this.flag = true
  //数据回显

  this.form.name = row.name
  this.form.floors = row.floors
  this.form.area = row.area
  this.form.propertyFeePrice = row.propertyFeePrice
  this.form.id = row.id

  // const { id, area, floors, name, propertyFeePrice } = row
  // this.form = {
  //   id, area, floors, name, propertyFeePrice
  // }
},

    del(id) {
      //二次确认删除 
      this.$confirm('确定删除吗？').then(() =>{
        delBuildingAPI(id).then(() => {
          //需要在本页最后一条数据时 回到上一页
          //此时后端已删 但是前端未删
          if(this.list.length === 0) this.params.page--
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() =>{
        //取消
      })
    },

    confirm() {
    this.$refs.form.validate((ok) =>{
      if (ok) {
        if(this.form.id){
          console.log('编辑成功')
          editBuildingAPI(this.form).then(() =>{
            this.$message.success('编辑成功')
            this.getList()
            this.flag=false

            //清空数据
            this.form={
              name: '',
              floors: '',
              area: '',
              propertyFeePrice: ''
            }
          })
        }else{
          addBuildingAPI(this.form).then(() =>{
          //请求成功
          this.$message.success('添加成功')
          this.getList()
          this.flag=false
          this.form={
              name: '',
              floors: '',
              area: '',
              propertyFeePrice: ''
            }


        }
        )

        }
        }
        //console.log('添加')
        // addBuildingAPI(this.form).then(() =>{
        //   //请求成功
        //   this.$message.success('添加成功')
        //   this.getList()
        //   this.flag=false
        // }
        // )
  })
    },

    open(){
    this.flag=true
  },

  handleClose(){
    console.log('有人点x号了')
    this.flag=false

    this.form={
              name: '',
              floors: '',
              area: '',
              propertyFeePrice: ''
            }

  },

    handleCurrentChange(page) {
      console.log('页码变了', page)
      this.params.page = page
      this.getList()
    },
    handleSizeChange(pageSize) {
      console.log('每页条数变了', pageSize)
      this.params.pageSize = pageSize
      // this.params.page = 1
      this.getList()
    },

    getList(){
      getBuildingListAPI(this.params).then((res) => {
        console.log(res)//存数据 展示在页面
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    fn(row){
    return row.status === 0 ? '空置中' : '租赁中'
  },
  }
}
</script>

<style lang="scss" scoped>
.btn{
  margin: 20px;
}
.box{
//   //浮动
// float: right;


  //flex弹性容器  横向布局
  display: flex;
  //flex默认从左往右
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 20px;
}
.department-container{
  padding:10px;
}
.search-container{
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237,237,237,.9);;
  padding-bottom: 20px;
  .search-label{
    width:100px;
  }
  .search-main{
    width: 220px;
    margin-right: 10px;
  }
}
</style>